<template>
  <div class="w template-table-container">
    <el-table
      :data="tableData"
      :header-cell-style="{
        textAlign: 'center',
        background: '#cccccc',
        color: '#000000'
      }"
      :cell-style="{ textAlign: 'center' }"
      border
      style="width: 100%; margin-bottom: 40px"
      :highlight-current-row="true"
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.propName"
        :label="item.label"
        :width="item.width || ''"
      >
        <template v-slot="{ row, column }">
          <slot
            v-if="item.slotName"
            :name="item.slotName"
            v-bind:row="row"
          ></slot>
          <div v-else>
            {{
              item.formatter
                ? item.formatter({ row, column })
                : row[item.propName]
            }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="w pag-wrap">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pageSize"
        :total="total"
        @current-change="currentPageChange"
        @size-change="pageSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
/** 通用表格模板（含分页器）
 * @param tableData 表格数据
 * @param columns 表格列配置数组
 *  columns内容项接口 {
 *     propName: string;
 *     label: string;
 *     width?: string;
 *     slotName?: string;
 *     formatter?: ({row, column}) => string;
 *  }
 * @param pageSize 分页规格 每页 pageSize 条
 * @param pageNum 分页页码
 * @param total 表格数据总数
 */
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageNum: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    currentPageChange(val) {
      this.$emit("currentPageChange", val)
    },
    pageSizeChange(val) {
      this.$emit("pageSizeChange", val)
    }
  }
}
</script>

<style lang="scss" scoped>
.pag-wrap .el-pagination {
  text-align: right;
}
</style>
>
